<template>
  <a-card :bordered="false" class="card-area">
    <a-calendar
      v-model="currDate"
      @select="onDaySelect"
      @panelChange="onPanelChange">
      <template slot="dateCellRender" slot-scope="value">
        <div v-if="isHoliday(value)">
          <a-popconfirm
            :disabled="isBtnDisabled(value)"
            title="把节假日设置为工作日？"
            ok-text="确定"
            cancel-text="取消"
            placement="bottomLeft"
            @confirm="updateHoliday"
          >
            <a-button type="primary" shape="circle" style="background: #f56c6c;border-style: none" :disabled="isBtnDisabled(value)">假</a-button>
          </a-popconfirm>
        </div>
        <div v-else>
          <a-popconfirm
            :disabled="isBtnDisabled(value)"
            title="把工作日设置为节假日？"
            ok-text="确定"
            cancel-text="取消"
            placement="bottomLeft"
            @confirm="updateHoliday"
          >
            <a-button type="primary" shape="circle" style="background: steelblue;border-style: none" :disabled="isBtnDisabled(value)">班</a-button>
          </a-popconfirm>
        </div>
      </template>
    </a-calendar>
  </a-card>
</template>
<script>
import moment from 'moment'
export default {
  data () {
    return {
      paneData: [],
      currDate: moment()
    }
  },
  methods: {
    isHoliday (value) {
      let formatDate = value.format('YYYY-MM-DD')
      let match = this.paneData.find(item => formatDate === item.holiday)
      if (match !== undefined && match.adjFlg === '2') {
        return true
      } else {
        return false
      }
    },
    isBtnDisabled (value) {
      if (value.month() !== this.currDate.month()) {
        return true
      } else {
        return false
      }
    },
    onPanelChange (value, mode) {
      this.getPaneData(value)
    },
    onDaySelect (value, mode) {
      this.currDate = value
    },
    getPaneData (date) {
      let dateStr = moment(date).format('YYYY-MM-DD')
      this.$get('holiday/getMonth', {
        dateStr
      }).then((r) => {
        this.paneData = r.data
      })
    },
    updateHoliday () {
      let dateStr = this.currDate.format('YYYY-MM-DD')
      this.$get('holiday/update', {
        dateStr
      }).then((r) => {
        this.getPaneData(this.currDate)
      })
    }
  },
  mounted () {
    this.getPaneData(this.currDate)
  }
}
</script>
